<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mouse Event</title>
<link rel="stylesheet" href="../CSS/style.css">
<script src="../javascript/utils.js" type="text/javascript" ></script>
</head>

<body>
	<h1>My page</h1>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		window.onload = function () {	
	var canvas = document.getElementById('canvas');
	function onMouseEvent (event) {
		console.log(event.type);
	}
	canvas.addEventListener('mousedown', onMouseEvent, false);
	canvas.addEventListener('mouseup', onMouseEvent, false);
	canvas.addEventListener('click', onMouseEvent, false);
	canvas.addEventListener('dblclick', onMouseEvent, false);
	canvas.addEventListener('mousewheel', onMouseEvent, false);
	canvas.addEventListener('mousemove', onMouseEvent, false);
	canvas.addEventListener('mouseover', onMouseEvent, false);
	canvas.addEventListener('mouseout', onMouseEvent, false);
};
	</script>
</body>
</html>